<script>
import { url } from '@ktw/ktools';
import * as helps from '@/utils/helps';
const SET_MAP_SERVICELIST = 'SET_MAP_SERVICELIST';
const SET_BUS_ATTRIBUTE = 'SET_BUS_ATTRIBUTE';

export default {
  name: 'DataTreeNode',
  props: {
    rootNode: {
      type: Object,
      default: () => ({}),
    },
    currentNode: {
      type: Object,
      default: () => ({}),
    },
    nodeData: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    // 节点图标
    iconClass() {
      return helps.iconClass(this.currentNode);
    },
    // 节点类型
    nodeType() {
      if (this.currentNode.id === this.rootNode.id) {
        return 'rootDirectory';
      } else {
        return helps.nodeType(this.currentNode);
      }
    },
    // 节点状态标示
    nodeClass() {
      return [
        'k-datatree-node-state',
        {
          'k-datatree-node-view': this.isView,
          'k-datatree-node-meta-view': this.isMetaView,
          'k-datatree-node-publish': this.isPublish,
        },
      ];
    },
    // 节点为目录类型
    isDirectory() {
      return this.nodeType === 'rootDirectory' || this.nodeType === 'directory';
    },
    // 是否可浏览,不可浏览显示发布服务按钮
    isView() {
      if (this.nodeType === 'vector' || this.nodeType === 'raster') {
        const serviceList = this.currentNode.serviceList;
        return (
          serviceList.length >= 2 || (serviceList.length === 1 && serviceList[0].servicestype === 5)
        );
      }
      return false;
    },
    // 是否可浏览元数据
    isMetaView() {
      return (
        (this.nodeType === 'vector' || this.nodeType === 'raster') && !!this.nodeData.hasMetadata
      );
    },
    // 是否可发布
    isPublish() {
      return (this.nodeType === 'vector' || this.nodeType === 'raster') && !this.isView;
    },
  },
  methods: {
    view() {
      // 浏览
      const service = this.currentNode.serviceList.find(service => service.servicestype === 12);
      const { search } = url.parse(service.servicesurl);
      const layers = search.layers ? search.layers : search.typeName;
      // this.$store.commit(SET_MAP_SERVICELIST, {
      //   [layers]: this.currentNode.serviceList,
      // });
    },
  },
};
</script>

<template>
  <div
    class="k-datatree-node">
    <span :class="nodeClass"></span>
    <SvgIcon
      :icon-class="iconClass"
      :size="16"/>
    <Ellipsis
      :length="10"
      tooltip>{{ isDirectory ? nodeData.title : nodeData.alias }}</Ellipsis>
    <span class="k-datatree-node-button">
      <slot
        :rootNode="rootNode"
        :currentNode="currentNode"
        :nodeData="nodeData"></slot>
      <SvgIcon
        v-if="isView"
        :size="16"
        icon-class="view"
        @click.native.stop="view"/>
      <SvgIcon
        v-if="isMetaView"
        :size="16"
        icon-class="view-meta"
        @click.native.stop="viewMeta"/>
        <!-- <SvgIcon
        v-if="!isDirectory"
        :size="16"
        icon-class="delete"
        @click.native.stop="deleteNode"/> -->
    </span>
  </div>
</template>

<style lang="less">
.k-datatree-node {
  position: relative;

  .k-datatree-node-state {
    position: absolute;
    top: -1px;
    left: 12px;
    &.k-datatree-node-view,
    &.k-datatree-node-meta-view,
    &.k-datatree-node-publish {
      height: 6px;
      width: 6px;
      border-radius: 50%;
      // background-color: #19be6b;
    }
    &.k-datatree-node-meta-view {
      // top: 10px;
      background-color: #19be6b;
    }
    &.k-datatree-node-publish {
      background-color: #ff9900;
    }
  }

  .k-svgicon {
    & > svg {
      fill: #459aee !important;
    }
  }

  .k-ellipsis {
    vertical-align: text-bottom;
  }

  .k-datatree-node-button {
    float: right;
    opacity: 0;
    transition: opacity 0.3s;
    > * {
      vertical-align: middle;
    }
  }

  &:hover {
    .k-datatree-node-button {
      opacity: 1;
    }
  }
}
</style>
